import React, { Component } from 'react';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
import Link from 'umi/link';
import { Checkbox, Alert, Icon, Form, Input, Button, Row, Col, Switch, message } from 'antd';
import onImg from '@/assets/knowledge/on.png';
import offImg from '@/assets/knowledge/off.png';
import statusImg from '@/assets/login/done.png';
import loginTitle from '@/assets/login/loginTitle.png';
import Login from '@/components/Login';
import styles from './Login.less';
var md5 = require('md5');
import savebuttom from '@/assets/account/robotSetup/savebuttom.png';

const { Tab, UserName, Password, Mobile, Captcha, Submit } = Login;
const loginCode = '/cloud/verifyCode?_=' + Math.random();
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8 },
};
const formTailLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8, offset: 4 },
};

@connect(({ login, loading }) => ({
  login,
  submitting: loading.effects['login/login'],
}))
class LoginPage extends Component {
  state = {
    type: 'account',
    autoLogin: true,
    isEmpty: true,
    loginCode: '/cloud/verifyCode?_=' + Math.random(),
  };

  componentDidMount() {
    // this.getCode()
  }

  onTabChange = type => {
    this.setState({ type });
  };

  onGetCaptcha = () =>
    new Promise((resolve, reject) => {
      this.loginForm.validateFields(['mobile'], {}, (err, values) => {
        if (err) {
          reject(err);
        } else {
          const { dispatch } = this.props;
          dispatch({
            type: 'login/getCaptcha',
            payload: values.mobile,
          })
            .then(resolve)
            .catch(reject);
        }
      });
    });

  // handleSubmit = (err, values) => {
  //   const { type } = this.state;
  //   if (!err) {
  //     const { dispatch } = this.props;
  //     dispatch({
  //       type: 'login/login',
  //       payload: values,
  //     });
  //   }
  // };

  getCode = () => {
    this.setState({
      loginCode: '/cloud/verifyCode?_=' + Math.random(),
    });
  };
  // 表单检验函数
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      let { password } = values;
      values.password = md5(password);
      if (!err) {
        const { dispatch } = this.props;
        dispatch({
          type: 'login/login',
          payload: values,
        });
      }
    });
  };

  changeAutoLogin = e => {
    this.setState({
      autoLogin: e,
    });
  };

  renderMessage = content => (
    <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />
  );

  checkLogin = (rule, value, callback) => {
    if (value !== '') {
      this.setState(
        {
          isEmpty: false,
        },
        () => {
          callback();
        }
      );
    } else {
      this.setState(
        {
          isEmpty: true,
        },
        () => {
          callback();
        }
      );
    }
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { login, submitting } = this.props;
    const { type, autoLogin } = this.state;
    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        <div className={styles.main}>
          <div className={styles.robotContent}>
            <div className={styles.robot} />
          </div>
          <div className={styles.loginWarp}>
            <div className={styles.loginBox} />
            <div className={styles.loginItemBox}>
              <h1 className={styles.loginTitle}>
                {/*电力语音机器人创新工场*/}
                <img src={loginTitle} />
              </h1>
              <div style={{ overflow: 'hidden', position: 'relative' }}>
                <div className={styles.loginInput}>
                  <p>用户名</p>
                  <Form.Item>
                    {getFieldDecorator('login', {
                      rules: [
                        { required: true, message: '请输入登录用户名' },
                        {
                          validator: this.checkLogin,
                        },
                      ],
                    })(<Input placeholder="请输入登录用户名" className={styles.nwInput} />)}
                  </Form.Item>
                </div>
                {!this.state.isEmpty ? (
                  <div style={{ position: 'absolute', top: 44, right: 31 }}>
                    <img src={statusImg} alt="" />
                  </div>
                ) : (
                  ''
                )}
              </div>
              {/*<hr style={{color:'#eeeeee!important'}} />*/}

              <div style={{ height: '1px', background: '#eeeeee' }} />

              <div style={{ overflow: 'hidden', marginTop: 20, position: 'relative' }}>
                <div className={styles.loginInput}>
                  <p>验证码</p>
                  <Form.Item>
                    {getFieldDecorator('verifyCode', {
                      rules: [{ required: true, message: '请输入验证码' }],
                    })(<Input placeholder="请输入验证码" className={styles.nwInput} />)}
                  </Form.Item>
                </div>
                <div style={{ position: 'absolute', top: 40, right: 31 }}>
                  <img
                    src={this.state.loginCode}
                    alt="登录验证码"
                    style={{ width: 100, height: 38, cursor: 'pointer' }}
                    onClick={() => this.getCode()}
                  />
                </div>
              </div>
              <div style={{ height: '1px', background: '#eeeeee' }} />
              <div style={{ overflow: 'hidden', marginTop: 20, position: 'relative' }}>
                <div className={styles.loginInput}>
                  <p>密码</p>
                  <Form.Item>
                    {getFieldDecorator('password', {
                      rules: [{ required: true, message: '请输入登录密码' }],
                    })(
                      <Input
                        type="password"
                        placeholder="请输入登录密码"
                        className={styles.nwInput}
                      />
                    )}
                  </Form.Item>
                </div>
                <div style={{ position: 'absolute', top: 0, right: 31, display: 'inline-block' }}>
                  <div className={styles.tool}>
                    {autoLogin ? (
                      <img
                        src={onImg}
                        style={{ cursor: 'pointer', width: 30, marginTop: 5 }}
                        alt=""
                        onClick={() => this.changeAutoLogin(false)}
                      />
                    ) : (
                      <img
                        src={offImg}
                        style={{ cursor: 'pointer', width: 30, marginTop: 5 }}
                        alt=""
                        onClick={() => this.changeAutoLogin(true)}
                      />
                    )}
                    <span style={{ marginLeft: 5 }}>自动登陆</span>
                  </div>
                  <div className={styles.tool} onClick={() => message.error('请联系管理员！')}>
                    <FormattedMessage id="app.login.forgot-password" />
                  </div>
                </div>
              </div>
            </div>
            <Button className={styles.doLogin} htmlType="submit">
              登 录
            </Button>
            <Row className={styles.ys}>
              <Col span="8">帮助</Col>
              <Col span="8">隐私</Col>
              <Col span="8">条款</Col>
            </Row>
          </div>
        </div>
      </Form>
    );
  }
}

export default Form.create()(LoginPage);
